import * as React from 'react';
import { useState } from 'react';
import { StyleSheet, useWindowDimensions, View } from 'react-native';
import { SceneMap, TabBar, TabView } from 'react-native-tab-view';
import ProfileCard from './profile/ProfileCard';
import LearnedCourseList from './profile/LearnedCourseList';
import AppointmentCourseList from './profile/AppointmentCourseList';

const renderScene = SceneMap({
  course: LearnedCourseList,
  appointment: AppointmentCourseList,
});

const renderTabBar = (props: any) => (
  <TabBar
    {...props}
    indicatorStyle={{
      backgroundColor: '#3366FF',
      height: 4,
      borderRadius: 2,
    }}
    labelStyle={{ fontWeight: 'bold', fontSize: 16 }}
    inactiveColor="#666"
    activeColor="#3366FF"
    style={{ backgroundColor: 'transparent' }}
  />
);

export default function ProfileScreen() {
  const [index, setIndex] = useState(0);
  const [routes] = React.useState([
    { key: 'course', title: '上过的课' },
    { key: 'appointment', title: '已约课程' },
  ]);

  const layout = useWindowDimensions();

  return (
    <View style={styles.container}>
      <ProfileCard style={styles.profileCard} />
      <TabView
        navigationState={{ index, routes }}
        renderTabBar={renderTabBar}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={{ width: layout.width }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  profileCard: {
    margin: 12,
  },
});
